<template>
  <div>
    <van-tabbar
      v-model="active"
      active-color="#ff5f16"
      inactive-color="#797d82"
      @change="onChange"
    >
      <van-tabbar-item icon="home-o">
        <i class="iconfont icon-dianyingpiaoiocn" slot="icon"></i>
        电影</van-tabbar-item
      >
      <van-tabbar-item icon="search">
        <i class="iconfont icon-yingyuan" slot="icon"></i>影院</van-tabbar-item
      >
      <van-tabbar-item icon="friends-o">
        <i class="iconfont icon-duihuakuang" slot="icon"></i
        >资讯</van-tabbar-item
      >
      <van-tabbar-item icon="setting-o">
        <i class="iconfont icon-wode" slot="icon"></i>我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)
export default {
  data() {
    return {
      active: 0,
      urlArr: ['/movie/playing', '/cinema', 'news', '/my']
    }
  },
  methods: {
    onChange(index) {
      this.$router.push(this.urlArr[index])
    }
  },
  created() {
    // 获取当前路由
    const path = this.$router.path
    let index = this.urlArr.indexOf(path)
    if (index < 0 && path === '/movie/feature') {
      index = 0
    }
    this.active = index
  }
}
</script>

<style scoped>
</style>
